<template>
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  total: number;
  currentPage?: number;
  pageSize?: number;
}>();

const emit = defineEmits(['change']);

const currentPage = ref(props.currentPage || 1);
const pageSize = ref(props.pageSize || 10);

const handleSizeChange = (size: number) => {
  pageSize.value = size;
  emit('change', currentPage.value, pageSize.value);
};

const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  emit('change', currentPage.value, pageSize.value);
};
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
